<template>
    <div id="trends">
        <head-tip title='圈子' :isback=false>
            <div class="head-right">
                <span @click="togourl(dataList.id)" class="link icon-only" style="font-size:22px; margin-right: 10px;color: #fff;"><i class="el-icon-edit-outline"></i></span>
            </div>
        </head-tip>
        <section class="trend-content">
            <div id="mescroll" class="mescroll" :class="{noBottom:$route.query.type!=2}">
                <ul id="dataList" class="data-list">
                    <scroller snappingHeight="10" class="scroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                        <li style="position:relative;" class="dynamic-one" v-for="(item,key) in dataList" v-if="item.itype==1" :key="key">
                            <p @click="beforeDel(item)" v-if="$route.query.type!=2" class="del"><i class="icon iconfont icon-icon_delete now"></i></p>
                            <div class="dyn-user">
                                <p class="dyn-c-img"><img :src="decodeURIComponent(item.cheadimage)"></p>
                                <p class="dyn-c-name">{{decodeURIComponent(item.crealname)}}<br />{{item.btime}}</p>
                            </div>
                            <p class="dyn-title">{{item.ccontent}}</p>
                            <p class="dyn-imgbox">
                                <img  
                                    v-gallery:group2
                                    :key="index"
                                    v-for="(img,index) in item.attachs" 
                                    :src="domainName+img.cpath+img.cfilename" >
                            </p>
                            <div class="timeshow">{{changetime(item.ddate)}}</div>
                            <div class="clear"></div>
                            <div class="good-count">
                                <label @click="showcommentpopup(item)" class="left-count" :data-id="item.id">
                                    <i class="iconfont icon-pinglun"></i><span>{{item.iaccount ?item.iaccount :0 }}</span>
                                </label>
                                <label class="left-good" :data-id="item.id" data-uid="null" @click="dianzan(item)">
                                    <i class="iconfont icon-dianzan " :class="{zanok:item.atid}"></i> <span>{{item.iatcount?item.iatcount :0}}</span>
                                </label>
                                <div class="clear"></div>
                            </div>
                            <div v-if="item.comments.length>0" class="contentList" :id="'artice'+item.id">
                                <span v-for="(comment,cindex) in item.comments" 
                                            :key="cindex"
                                            v-if="!comment.ireplyuid" class="reply-list-info" style="display:block" :data-iarticleid="item.id" :data-id="comment.id" :data-name="comment.crealname ? comment.crealname : comment.cuserid"><span @click=" showcommentpopup(item,comment)" class="uName rName">{{comment.crealname ? decodeURIComponent(comment.crealname) : comment.cuserid}}</span> : {{comment.content}}</span>
                                            <span v-else class="reply-list-info" style="display:block" :data-iarticleid="item.id" :data-id="comment.id" :data-name="comment.crealname ? comment.crealname : comment.creplyuser"><span @click=" showcommentpopup(item,comment)" class="uName rName">{{comment.crealname ? decodeURIComponent(comment.crealname) : comment.cuserid}}</span>回复   <span class="uName">{{comment.creplyrealname ? decodeURIComponent(comment.creplyrealname) : comment.creplyuser}}</span>: {{comment.content}}</span>
                            </div>
                        </li>
                    </scroller>
                </ul>
            </div>
             <!--输入框-->
            <mt-popup v-model="ishowcomment" position="bottom" class="comment-popup">
                <!--<input type="hidden" id="reply-name" value=" ">-->
                <input type="hidden" name="iarticleid" id="" value="">
                <input type="hidden" name="ireplyid" id="" value="">
                <input type="text" name="content" id="reply-input" placeholder="说点什么吧...">
                <div id="reply-submit" @click="sendcomment">发送</div>
            </mt-popup>
        </section>
        <foot v-if="this.$route.query.type==2"></foot>
        <!-- 删除提示框 -->
        <el-dialog
            id="tosureDel"
            :visible.sync="delVisible"
            width="80%"
            style="margin-top:15vh">
            <span>确认删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="toDel">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框结束 -->
    </div>
</template>

<script>
import {baseUrl} from '../../config/env.js'
import {delArt} from '../../js/dataServe.js'
import fetch from '@/config/fetch.js'
import headTip from '@/components/common/head'
import foot from '@/components/common/foot'
import {footNav} from '@/params/foot'
export default {
    data () {
      return {
        nowItem:{},
        pageNo:1,
        delVisible:false,
        delItem:{},
        domainName:'http://card.adouyun.com/CloudCard/',
        ishowcomment:false,
        dataList:[],
      };
    },
    
    methods:{
        async infinite(done,isrefresh) {
            let self = this;
            let sendData = {
                pageNo:self.pageNo,
                pageSize:10,
                findContent:'',
                itype:1
            }
            if(self.$route.query.type!=2){
                sendData.uid = sessionStorage.uid;
                sendData.iloguid = ''
            }else{
                sendData.uid = ''
                sendData.iloguid = sessionStorage.uid
            }
            let responseData = fetch('/article/listArticle',sendData,'POST');
            await responseData.then((res)=>{
                                    if(res.data && res.data.list.length>0){
                                        
                                        let dataList = res.data.list;
                                        dataList.forEach( (item,key) => {
                                            if(self.dataList.indexOf(item.id)<0){//去重
                                               
                                                    self.dataList.push(item)
                                            
                                            }
                                        })
                                        if(isrefresh){
                                            self.dataList = dataList
                                        }
                                        self.pageNo++
                                        self.doneSome = done
                                        done();

                                    }else{
                                        self.$refs.my_scroller.finishInfinite(2);
                                    }
                                })
            
        },
        async refresh(done) {
            let isrefresh = true;
            this.pageNo = 1;
            await this.infinite(done,isrefresh);
            done();
        },
        togourl(id,uid){
           this.$router.push({path:'/trends/add',query: {id:id}});
        },
        changetime(val){
            return this.timeBetween(val);
        },
        dianzan(item){
            var iarticleid=parseInt(item.id)
            var url='/thumbup/saveThumbUp'
            var json={iarticleid:iarticleid}
            if(item.atid){
                url='/thumbup/cancelThumbUp'
                json={id:item.atid}
            }
            let responseData = fetch(url,json,'POST');
            responseData.then((res)=>{
                if(res.result==1){
                    if(item.atid!=null){
                        item.iatcount--
                        item.atid = null
                    }else{
                        item.iatcount++
                        item.atid = res.data.id
                    }              
                }else{
                    self.$message({
                                duration: 2000,
                                message: res.msg,
                                type: 'error'
                            })
                }
            })
        },
        showcommentpopup(iarticle,ireply){
            this.nowItem = iarticle
            this.ishowcomment=true
            var adom=document.querySelector('input[name="iarticleid"]')
            var rdom=document.querySelector('input[name="ireplyid"]')
            adom.value = ''
            rdom.value = ''
            adom.value=iarticle.id
            if(ireply){
               rdom.value=ireply.id
            }
        },
        sendcomment(){
            var username = decodeURIComponent(sessionStorage.username)
            var qs = require('qs');
            var self = this;
            var iarticleid=document.querySelector('input[name="iarticleid"]').value
            var content=document.querySelector('input[name="content"]').value
            var ireplyid=document.querySelector('input[name="ireplyid"]').value
            if(!content){
                alert('请输入评论内容 ');
                return false
            }
            this.$axios.post(this.httpurl('comment/saveComment'),qs.stringify({
                iarticleid:iarticleid,
                content:content,
                ireplyid:ireplyid
            }))
            .then(response=>{
                var data=response.data
                if(data.result==1){
                    this.nowItem.comments.push(data.data)
                    // console.log(this.nowItem.comments)
                    // var CurData=data.data
                    this.ishowcomment=false
                    document.querySelector('input[name="content"]').value=''
                    // this.mescroll.resetUpScroll()
                }
            })
        },
        beforeDel(list){
            this.delItem = list;
            this.delVisible = true;
        },
        toDel(){
            let self = this;
            let responseData = delArt(self.delItem.id);
            responseData.then((res)=>{
                                        if(res.result==1){
                                            let index = self.dataList.indexOf(self.delItem);
                                            self.dataList.splice(index,1)
                                            self.$message({
                                                duration: 2000,
                                                message: '删除成功',
                                                type: 'success'
                                            })
                                            this.delVisible = false;
                                            let userInfo = JSON.parse(sessionStorage.userinfos)
                                            userInfo.iartcount--
                                            sessionStorage.setItem('userinfos',JSON.stringify(userInfo))
                                        }
                                    })
        },
        toArt(item){
            this.$router.push({path:'/card/article',query:{id:item.id,uid:item.uid,keep:1}});
        }
    },
    components:{
        headTip,
        foot
    },
    mounted(){
        
    }
}
</script>

<style scoped >
.arts{
    display: flex;
    flex-direction: row-reverse;
    padding: 0 2rem;
    justify-content: flex-start;
    background: #efefef;
    height: 5rem;
    font-size: 1rem;
    color: #8a8a8a;
}
.timeshow{ padding: 2%; font-size: .8rem; color: #999;}
.arts-dyn-imgbox{
    width: 6rem !important;
}
.arts-dyn-imgbox img{
    width: 100% !important;
    margin:0 !important;
}
.dyn-user{
    display: flex;
    align-items: center;
    padding: 0.5rem;
}
.dyn-c-img{
    width: 10%;
    height: autp;
    margin-right: 1rem;
}
.dyn-c-img img{
    width: 100%;
    height: 100%;
    border-radius: 5rem;
}
.del{
    position:absolute;
    height:2rem;
    width:2rem;
    background:rgba(0,0,0,0.5);
    top:0.5rem;
    right:0.5rem;
    border-radius:2rem;
    display:flex;
    justify-content: center;
    align-items: center;
}
.del i{
    color:#ffffff;
}
[v-cloak] { display: none }
.trend-content{height: auto;}
</style>
<style scoped>
.mescroll{position: fixed;top: 44px;bottom: 44px;height: auto; background: #f9f9f9;}
/*动态*/
/* { width:100%;height: auto;box-sizing: border-box; padding-bottom: 1rem;} */
.dynamic-one{ display: inline-block;  width: 100%; height: auto; overflow: hidden;font-size: .9rem; padding-top: .2rem;margin-bottom: 1rem;  padding-bottom: 1rem; background: #fff;}
.last-one{margin-bottom: 0}
.dynamic-one p.dyn-time{ display: inline-block; width: auto; margin-left: 2%; background: #e9e9e9; padding-left: .3rem; padding-right: .3rem; font-size: .7rem; padding-top: .2rem; padding-bottom: .1rem; border-radius: 3px;}
.dynamic-one p.dyn-time i{ font-size: .7rem; padding-right: .2rem;}
.dynamic-one p.dyn-imgbox img{ display: inline-block; width: 23.5%; height: 4.5rem; float: left; margin:1.5% 1.5% 0 0; margin-top: .5rem;}
.dynamic-one p.dyn-title{ width: 96%; margin: auto; height: auto; overflow: hidden;}
.dynamic-one p.dyn-imgbox{ width: 96%; margin: auto; height: auto; overflow: hidden;}
.good-count{ width: 100%; margin: auto; height: auto;margin-top: 1rem; color: #333; overflow: hidden;}
.good-count label.left-count{ width: auto; float: left; text-align: center; margin-left: 2%;}
.good-count label.left-count a#turnTodynamic{ display: inline-block; width: auto; list-style: none;}
.good-count label.left-good{ width: auto; float: left; text-align: center; margin-left: 2%;}
.good-count label.left-count i{ color: #ddd;font-size: 1.1rem;}
.good-count label.left-good i{ color: #ddd; font-size: 1.1rem;}
.cardcode-popup{width: 100%;}
.reply-list-info { display: block;width: 100%; line-height: 2rem;}
.reply-list-info span.uName {display: inline-block;color: #333;font-weight: bold;}
.good-count label.left-good i.zanok {color:#00AA76 }
.comment-popup{color: #666;line-height: 3.6rem;height: 3.6rem;background: #2790A6;width: 100%;}
#reply-input{border-radius: 5px;outline: 0;width: 70%;height: 2.35rem;margin-left: 2%;border: 0;margin-top: .65rem;padding-left: 10px;float: left;font-size: .8rem;}
#reply-submit{background: #FFF;width: 18%;float: right;height: 2.35rem;margin-right: 2%;text-align: center;margin-top: 10px;line-height: 2.35rem;border-radius: 5px;color: #2790A6;}
.contentList{width: 96%; height: auto; overflow: hidden; margin:auto ; margin-top: 1rem;border-top: solid 0.05rem #eee;}
.noBottom{
    bottom:0;
}
</style>
